<script setup lang="ts">
import { ref, onBeforeMount, shallowRef } from 'vue'
import { useRoute } from 'vue-router'
import { getXlsxJson, luckysheetPreviewXlsx } from '@/utils/xlsxPreview'
import { downloadFilePython } from '@/api/pengwei/file'
const route: any = useRoute()
const active = ref(-1)
const sheetsList = shallowRef<{ [key: string]: any }>([])

// 切换sheet
function handleSwitch(index: number) {
	active.value = index
	const currentSheets = [sheetsList.value[index]]
	luckysheetPreviewXlsx({ data: currentSheets, container: 'xlsxPreview' })
}

function getXlsx(fileName: string) {
	downloadFilePython({ file_name: fileName }).then((res) => {
		if (!res.data) return
		getXlsxJson({ buffer: res.data }).then((arr: never[]) => {
			console.log(res, 'res')
			sheetsList.value = arr
			handleSwitch(0)
		})
	})
}
onBeforeMount(() => {
	getXlsx(route.query.name)
})
</script>
<template>
	<div class="xlsx-container">
		<div class="menu-list">
			<h6>项目摘要表</h6>
			<p v-for="(item, i) in sheetsList" :class="[active === i ? 'active' : '']" :key="i" @click="handleSwitch(i)">
				{{ item.name }}
			</p>
		</div>
		<div class="xlsx-box">
			<div class="xlsx-preview" id="xlsxPreview">
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.xlsx-container {
	height: 100%;
	display: flex;
	overflow: hidden;
	.menu-list {
		width: 280px;
		height: 100%;
		overflow-y: auto;
		padding: 0 10px;
		background: #fff;
		h6 {
			height: 40px;
			line-height: 40px;
			text-align: left;
			font-size: 14px;
			font-weight: bold;
			color: #5a78f2;
			display: flex;
			align-items: center;
		}
		p {
			cursor: pointer;
			line-height: 28px;
			border-radius: 5px;
			padding: 0 10px;
			margin-bottom: 6px;
			&:hover,
			&.active {
				color: #4466f0;
				background: rgba(68, 102, 240, 0.2);
			}
		}
	}
	.xlsx-box {
		flex: 1;
		height: 100%;
		overflow: hidden;
		// overflow-y: auto;
		margin-left: 20px;
		background: #fff;
		position: relative;
		.go-prev {
			// height: 30px;
			// display: flex;
			// align-items: center;
			// :deep(.el-icon) {
			//   cursor: pointer;
			//   color: #999;
			// }
		}
		.xlsx-preview {
			// height: calc(100% - 30px);
			height: 100%;
			background-color: rgba(76, 76, 76, 0.1);
			:deep(.luckysheet) {
				// 表格禁止编辑
				.luckysheet-cell-main {
					pointer-events: none;
				}
				// 底部按钮
				.luckysheet-sheet-area {
					.luckysheet-sheets-add {
						display: none;
					}
				}
			}
		}

		.no-file {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
</style>
